'use client';

import { useEffect, useRef } from 'react';
import styled from 'styled-components';
import * as echarts from 'echarts/core';
import { PieChart } from 'echarts/charts';
import {
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  GraphicComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  PieChart,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  GraphicComponent,
  CanvasRenderer
]);

// 样式组件
const StatsContainer = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 5px;
`;

const ChartContainer = styled.div`
  flex: 1;
  width: 100%;
  height: 100%;
`;

// Tooltip参数类型
interface TooltipParams {
  name: string;
  value: number;
  percent: number;
}

// 模拟空域资源使用数据
const airspaceData = [
  { 
    name: '已使用', 
    value: 35, 
    itemStyle: { 
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#2378f7' },
        { offset: 1, color: '#1890ff' }
      ]),
      borderRadius: 10,
      borderWidth: 2,
      borderColor: 'rgba(24, 144, 255, 0.3)'
    }
  },
  { 
    name: '已预留', 
    value: 25, 
    itemStyle: { 
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#23cdea' },
        { offset: 1, color: '#13c2c2' }
      ]),
      borderRadius: 10,
      borderWidth: 2,
      borderColor: 'rgba(19, 194, 194, 0.3)'
    }
  },
  { 
    name: '占用中', 
    value: 15, 
    itemStyle: { 
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#ffcb47' },
        { offset: 1, color: '#faad14' }
      ]),
      borderRadius: 10,
      borderWidth: 2,
      borderColor: 'rgba(250, 173, 20, 0.3)'
    }
  },
  { 
    name: '未使用', 
    value: 25, 
    itemStyle: { 
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#7be141' },
        { offset: 1, color: '#52c41a' }
      ]),
      borderRadius: 10,
      borderWidth: 2,
      borderColor: 'rgba(82, 196, 26, 0.3)'
    }
  }
];

export default function AirspaceStats() {
  const chartRef = useRef<HTMLDivElement>(null);

  // 初始化图表
  useEffect(() => {
    if (!chartRef.current) return;
    
    const chartInstance = echarts.init(chartRef.current);
    
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: (params: TooltipParams) => {
          const { name, value, percent } = params;
          return `${name}: ${value}% (${percent}%)`;
        },
        backgroundColor: 'rgba(0, 21, 41, 0.8)',
        borderColor: 'rgba(24, 144, 255, 0.3)',
        textStyle: {
          color: '#ffffff'
        }
      },
      legend: {
        orient: 'vertical',
        right: 0,
        top: 'middle',
        itemWidth: 12,
        itemHeight: 12,
        itemGap: 10,
        formatter: (name: string) => {
          const item = airspaceData.find(item => item.name === name);
          return `{name|${name}} {value|${item?.value}%}`;
        },
        textStyle: {
          rich: {
            name: {
              width: 40,
              color: '#a0cfff'
            },
            value: {
              color: '#ffffff',
              fontWeight: 'bold'
            }
          }
        },
        itemStyle: {
          borderWidth: 0
        },
        data: airspaceData.map(item => item.name)
      },
      series: [
        {
          name: '空域资源使用情况',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['35%', '50%'],
          avoidLabelOverlap: true,
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            borderWidth: 1,
            borderColor: 'rgba(255, 255, 255, 0.2)'
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{c}%',
            color: '#ffffff',
            fontSize: 10,
            fontWeight: 'bold',
            padding: 0,
            distanceToLabelLine: 3
          },
          labelLayout: {
            hideOverlap: true,
            moveOverlap: 'shiftY'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 12,
              fontWeight: 'bold',
              color: '#ffffff'
            },
            itemStyle: {
              shadowBlur: 20,
              shadowColor: 'rgba(0, 0, 0, 0.8)'
            }
          },
          labelLine: {
            show: true,
            length: 12,
            length2: 12,
            smooth: true,
            lineStyle: {
              color: 'rgba(160, 207, 255, 0.5)',
              width: 1
            }
          },
          data: airspaceData,
          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function () {
            return Math.random() * 200;
          }
        }
      ]
    };
    
    chartInstance.setOption(option);
    
    // 监听窗口大小改变事件
    const resizeHandler = () => {
      if (chartInstance) {
        chartInstance.resize();
      }
    };
    
    window.addEventListener('resize', resizeHandler);
    
    return () => {
      window.removeEventListener('resize', resizeHandler);
      if (chartInstance) {
        chartInstance.dispose();
      }
    };
  }, []);

  return (
    <StatsContainer>
      <ChartContainer ref={chartRef} />
    </StatsContainer>
  );
} 